import {Box, CircularProgress} from "@mui/material";
import {FC, useState} from "react";
import {useNavigate} from "react-router-dom";
import CheckSharpIcon from "@mui/icons-material/CheckSharp";
import MaleSharpIcon from "@mui/icons-material/MaleSharp";
import FemaleSharpIcon from "@mui/icons-material/FemaleSharp";
import AppProvider from "../../../sources/AppProvider.ts";
import DGConnect from "../../../sources/DGConnect.ts";
import DGTextView from "../../../components/DGTextView.tsx";
import DGListView from "../../../components/DGListView.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGToast from "../../../components/DGToast.tsx";
import {AlertColor} from "@mui/material/Alert/Alert";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";

interface ChangeSexProps {
    state: boolean,
    close: () => void,
}

interface DGToastProps {
    state: boolean,
    severity: AlertColor,
    text: string
}

const ChangeSex: FC<ChangeSexProps> = ({state, close}) => {
    // 获取全局上下文信息`
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // Toast 弹窗
    const [toast, setToast] = useState<DGToastProps>({state: false, severity: "info", text: ""});
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 选择状态
    const [select, setSelect] = useState<number | null>(null);


    // 关闭函数
    const handleClose = (id: number) => {
        if (!loading) {
            // 关闭面板
            close();
            // 后退
            if (id === 1) router(-1);
        }
    }


    // 更改性别函数
    const handleChangeSex = (sex: number) => {
        // 判断是否重选
        if (App!.info && parseInt(String(App!.info['sex'])) === sex) return handleClose(1);
        // 设置选中
        setSelect(sex);
        // 开始加载
        setLoading(true);
        // 发起更改性别请求
        DGConnect.POST(JSON.stringify({info: "changeSex", sex: sex}), result => {
            // 取消选中
            setSelect(null);
            // 关闭加载
            setLoading(false);
            // 返回错误信息
            if (result['data']['code'] !== 200) {
                return setToast({
                    state: true,
                    severity: "success",
                    text: result['data']['message'] + "错误码：" + result["data"]["code"]
                });
            }
            // 刷新用户数据
            App!.setUserInfo(result['data']['result']);
            // 提示修改完成
            // setToast({state: true, severity: "success", text: result['data']['message']});
            // 关闭弹窗
            setTimeout(() => handleClose(1), 500);
        }, error => {
            // 关闭加载
            setLoading(false);
            // 提示错误信息
            setToast({
                state: true,
                severity: "success",
                text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error['stack']
            });
        });
    }


    const ContentView = (<>
        {/* 未登录 */}
        {!App!.info && <DGTextView Body Bold>您当前未登陆账户，服务不可用！</DGTextView>}
        {/* 已登陆 */}
        {App!.info && <Box style={{display: "flex", flexDirection: "column", gap: "10px"}}>
            {/* 提示语 */}
            <DGTextView Body Bold>双兔傍地走，安能辨我是雄雌</DGTextView>
            {/* 性别选项 */}
            <DGListView gap={10} NoBackground>
                {/* 男 */}
                <DGListViewItem
                    icon={<MaleSharpIcon/>} title="男" disabled={loading} onClick={() => handleChangeSex(1)}
                    rIcon={<>
                        {App!.info && parseInt(String(App!.info["sex"])) === 1 && <CheckSharpIcon/>}
                        {loading && select === 1 && <CircularProgress size={24}/>}
                    </>}
                    Background/>
                {/* 女 */}
                <DGListViewItem
                    icon={<FemaleSharpIcon/>} title="女" disabled={loading} onClick={() => handleChangeSex(2)}
                    rIcon={<>
                        {App!.info && parseInt(String(App!.info["sex"])) === 2 && <CheckSharpIcon/>}
                        {loading && select === 2 && <CircularProgress size={24}/>}
                    </>}
                    Background/>
            </DGListView>
        </Box>}
    </>);


    return (<Box>
        {/* Toast 组件 */}
        <DGToast state={toast} close={() => setToast({state: false, severity: toast.severity, text: toast.text})}/>

        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            title="更改性别" state={state} close={() => handleClose(1)} load={loading}
            PANEL AUTO>
            {ContentView}
        </DGDialogLayout>

        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout
            title="更改性别" state={state} close={() => handleClose(1)} load={loading}
            flex="bottom" PANEL AUTO>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}

export default ChangeSex;